/**
 * @author:bjzhang
 * Created by MingIr on 2018/1/24.
 */

import React,{ Component } from 'react';
import {
    View,
    Text,
    TextInput,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import PHead from '../module/header';
import Toast from 'react-native-root-toast';
import { common } from '../module/common'
export default class Login extends Component{
    constructor(props){
        super(props);
        this.state = {
            phone:'',
            verify:0,
            btnDisable:true,
            backgroundColor:'rgba(67,203,254,.5)',
            verifyTrue:false,
            verifyText:'获取验证码',
        }
    }
    componentDidMount(){
    }
    componentWillUnmount(){
        clearInterval(that.verifyInterval);
    }
    changePhone(phone){
        this.setState({phone:phone});
        this.setBtnState(phone,this.state.verify);
    }
    setBtnState(phone,verify){
        if(phone && verify){
            this.setState({ btnDisable:false,backgroundColor:'rgba(67,203,254,1)' });
        }else{
            this.setState({ btnDisable:true, backgroundColor:'rgba(67,203,254,.5)'});
        }
    }
    changeVerify(verify){
        this.setState({verify:verify});
        this.setBtnState(this.state.phone,verify);
    }
    closeLogin(){
        this.props.navigation.goBack();
    }
    getVerify(){
        let that = this;
        if(that.verifyPhone(that.state.phone)){
            that.setState({ verifyTrue:true });
            common.get(common.api.user.getcode,{ phone:this.state.phone }).then(res => {
                let timeout = 59;
                that.setState({verifyText: '60秒后重试'});
                that.verifyInterval = setInterval(function(){
                    if(timeout > 0) {
                        that.setState({verifyText: (timeout--) + '秒后重试'});
                    }else {
                        clearInterval(that.verifyInterval);
                        that.setState({ verifyText:'获取验证码',verifyTrue:false });
                    }
                },1000);
            }).catch(err => {
                that.setState({ verifyTrue:false });
            });
        }
    }
    verifyPhone(phone){
        let reg = /^1\d{10}/;
        if(reg.test(phone)){
           return true;
        }
        Toast.show("请输入正确的手机号",{
            duration: Toast.durations.LONG,
            position: Toast.positions.BOTTOM
        });
        return false;
    }
    login(){
        let that = this;
        if(that.verifyPhone(that.state.phone)){
            common.post(common.api.user.login,{ phone:that.state.phone,verifyCode:that.state.verify }).then(res => {
                userInfo = res;
                storage.save({key:'userinfo',data:res });
                that.props.navigation.goBack();
            }).catch(err => {
                var code = err['statusCode'];
                var msg = "登陆失败";
                if(code == 2002){
                    msg = "请输入正确的验证码";
                } else if(code == 3001){
                    msg = "验证码已过期";
                } else if(code == 1001){
                    msg = "您的账号已被禁用";
                }
                Toast.show(msg,{
                    duration: Toast.durations.LONG,
                    position: Toast.positions.BOTTOM
                });
            });
        }
    }
    render(){
        return(
            <View style={styles.container}>
                <PHead title='登陆/注册' rightText='关闭' onRightEvent={this.closeLogin.bind(this)}></PHead>
                <View style={[styles.container,styles.loginWrap]}>
                    <View style={styles.formControl}>
                        <TextInput
                            underlineColorAndroid='transparent'
                            placeholder='请输入您的手机号码'
                            placeholderTextColor='#B0B2C2'
                            keyboardType='numeric'
                            style={styles.formInput} onChangeText={(text)=>this.changePhone(text)}></TextInput>
                    </View>
                    <View style={[styles.formControl,styles.flexRow]}>
                        <TextInput
                            underlineColorAndroid='transparent'
                            placeholder='请输入您的验证码'
                            placeholderTextColor='#B0B2C2'
                            keyboardType='numeric'
                            style={[styles.formInput,{flex:1}]} onChangeText={(text)=>this.changeVerify(text)}></TextInput>
                        <TouchableOpacity activeOpacity={.7} disabled={ this.state.verifyTrue } onPress={this.getVerify.bind(this)}>
                            <Text style={styles.btnTextUn}>{this.state.verifyText}</Text>
                        </TouchableOpacity>
                    </View>
                    <View>
                        <TouchableOpacity disabled={this.state.btnDisable} activeOpacity={.7} style={[styles.loginButton,{ backgroundColor:this.state.backgroundColor }]} onPress={this.login.bind(this)}>
                            <Text style={styles.loginButtonText}>登录</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:'column',
        backgroundColor:'#fff',
        justifyContent:'flex-start',
    },
    flexRow:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
    },
    loginWrap:{
        paddingLeft:15,
        paddingRight:15,
    },
    formControl:{
        marginTop:10,
        borderBottomWidth:.5,
        borderBottomColor:'#E6E6E6'
    },
    formInput:{
        paddingTop:20,
        paddingBottom:20,
        fontSize:16,
        color:'#5F6484',
    },
    btnTextUn:{
        fontSize: 16,
        color: '#5F6484',
    },
    loginButton:{
        marginTop:30,
        backgroundColor:'rgba(67,203,254,.5)',
        paddingTop:12,
        paddingBottom:12,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:4,
    },
    loginButtonText:{
        fontSize:16,
        color:'#fff',
    },
});